<template>
  <div class="sanstyle">
    <!--左边-->
    <div>
      <div class="ssl">
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">动物统计</span>
            <br/>
            <span class="xwz">To protect animals</span>
          </div>
          <div style="width: 2rem;text-align: left">
            <span style="color: white;font-size: .18rem;">总计：</span>
            <span style="font-size: .28rem;color: #2EFFF2;">{{animalsum}}</span>
            <span style="color: white;font-size: .18rem;">种</span>
          </div>
        </div>
        <!--标题 E-->

        <!--统计图区域 B-->
        <div class="ecbox" id="bar1"></div>
        <!--统计图区域 E-->

        <div style="height: .5rem;"></div>
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">植物统计</span>
            <br/>
            <span class="xwz">To protect the plant</span>
          </div>
          <div style="width: 2rem;text-align: left">
            <span style="color: white;font-size: .18rem;">总计：</span>
            <span style="font-size: .28rem;color: #2EFFF2;">{{Plantsum}}</span>
            <span style="color: white;font-size: .18rem;">种</span>
          </div>
        </div>
        <!--标题 E-->

        <!--统计图区域 B-->
        <div class="ecbox" style="background: none" id="bar2"></div>
        <!--统计图区域 E-->


      </div>
    </div>
    <!--左边-->
    <!--中间 B-->
    <div class="mapbox">

      <!--tab切换 B-->
      <div class="qhtab">
        <div v-for="(item,index) in navList" :key="index" @click="datamap(item.type)">
          <img :src="item.sts?'/static/images/tab1.png':'/static/images/tab2.png'" alt="">
          <span style="margin-left: .08rem;">{{item.name}}</span>
        </div>
      </div>
      <!--tab切换 E-->
      <!--中间地图 B-->
      <div id="map" style="height: 75%;width: 100%;"></div>
      <!--中间地图 E-->

      <!--基本信息 B-->
      <div class="jbxxbox">

        <div class="jbxxtitle">
          <span style="color: white;font-size: .26rem;font-family: 'biaoti'">基本信息</span>
          <br/>
          <span class="xwz">The basic information</span>
        </div>

        <div class="jbxxtitle">
          <span style="color: white;font-size: .18rem;margin-right: .16rem;">境内</span>
          <!-- <span style="color: #2EFFF2;font-size: .24rem;">{{location}}</span> -->
        </div>

        <div
          style="display: flex;align-items: center;justify-content: space-between;padding: 0 .2rem;margin-top: .1rem;">
          <div>
            <span style="color: white;font-size: .18rem;margin-right: .16rem;">建立于(年)</span>
            <!-- <span style="color: #2EFFF2;font-size: .24rem;">{{setUp}}</span> -->
          </div>
          <div>
            <span style="color: white;font-size: .18rem;margin-right: .16rem;">海拔(米)</span>
            <!-- <span style="color: #2EFFF2;font-size: .24rem;">{{altitude}}</span> -->
          </div>
          <div>
            <span style="color: white;font-size: .18rem;margin-right: .16rem;">占地约(公顷)</span>
            <!-- <span style="color: #2EFFF2;font-size: .24rem;">{{size}}</span> -->
          </div>
        </div>

      </div>
      <!--基本信息 E-->

    </div>
    <!--中间 E-->

    <!--右边 B-->
    <div>
      <div class="ssls">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">视频资料</span>
            <br/>
            <span class="xwz">Video data</span>
          </div>
        </div>
        <!--标题 E-->
        <!--视频区域 B-->
        <div class="ecbox">
          <div class="rvbox">
            <video :src="'/api/visual/'+ areaId +'/video.mp4'" controls autoplay="autoplay"></video>
          </div>
        </div>
        <!--视频区域 E-->
        <div style="height: .5rem;"></div>
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <!--  野鸭湖 <span class="dwz">保护区大事记</span>-->
            <span class="dwz">大事记</span>
            <br/>
            <span class="xwz">Memorabilia of the Reserve</span>
          </div>
        </div>
        <!--标题 E-->

        <!-- <div class="ecbox" style="overflow: hidden;background: none">
          <div class="gdnr">
            <div class="dsj" v-for="(item,index) in dsjList" :key="index">
              <div style="flex: 1">
                <img src="/static/images/tab1.png" alt="">
              </div>
              <div style="flex: 9">
                <span style=" color: #34CEFF;">{{item.time}}年 </span>
                <span>{{item.text}}</span>
              </div>
            </div>
          </div>
        </div> -->

      </div>
    </div>
    <!--右边 E-->

  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import http from '../utils/http'
  import api from '../utils/api'


  export default {
    name: "jbxx",
    data() {
      return {
        navList: [
          {
            name: '功能区划',
            type: 'gnqh',
            sts: true
          },
          {
            name: '网格',
            type: 'wg',
            sts: false
          }
        ],
        areaId: "",
        jbxxOBJ: {},
        location: "",
        size: "",
        setUp: "",
        altitude: "",
        dsjList: [],
        animalsum: 0,
        Plantsum: 0,
        bhqName: [],
        MapColor: [
          'rgba(203, 255, 252, 0.8)',
          'rgba(74, 239, 230, 0.8)',
          'rgba(4, 178, 169, 0.8)',
          'rgba(203, 255, 252, 0.8)',
          'rgba(114,8,82,.8)',
          'rgba(174,213,13,.8)',
          'rgba(194,133,112,.8)',
          'rgba(225,66,19,.8)',
          'rgba(94,60,190,.8)',
          'rgba(253,166,199,.8)'
        ],
      }
    },
    mounted() {
      this.getMap();
      let vm = this;
      (async function f() {
        let res = await http.get('/papi/' + vm.areaId + '_json/gnqh.json')
        let arr = [];
        res.data.features.forEach(t => {
          arr.push(t.properties.name)
        })
        vm.bhqName = arr;
        vm.datamap('gnqh')
      })();

    },
    created() {
      this.areaId = window.sessionStorage.getItem('areaId');
      this.getEvenDetail();
    },
    methods: {
      getEvenDetail() {
        let _that = this;
        (async function f() {
          let res = await http.get(api.EvenDetail + _that.areaId)
          console.log(res , 'res');
          _that.jbxxOBJ = res.data;
          _that.dsjList = res.data.baseInfo.evenDetail;
          _that.location = res.data.baseInfo.location;
          _that.size = res.data.baseInfo.size;
          _that.setUp = res.data.baseInfo.setUp;
          _that.altitude = res.data.baseInfo.altitude;
        })()
      },
      getMap() {
        let _that = this;
        (async function f() {
          let res = await http.get(api.LevelGroup + '?areaId=' + _that.areaId)
          if (res.data.code == '200') {
            let ao = res.data.data.animalMap;
            let po = res.data.data.plantMap;
            //ao.beijingLevelTwo   po.beijingLevelTwo
            let animal = [ao.levelOne, ao.levelTwo, ao.beijingLevelOne];
            let plant = [po.levelOne, po.levelTwo, po.beijingLevelOne];
            _that.drawBar1(animal);
            _that.drawBar2(plant);
            _that.animalsum = ao.sum;
            _that.Plantsum = po.sum;

          } else {
            alert(res.data.message)
          }

        })()
      },
      datamap(flag) {
        this.maptype = flag;
        this.navList.forEach(e => {
          if (flag == e.type) {
            e.sts = true
          } else {
            e.sts = false
          }
        })
        if (flag == 'gnqh') {
          let url = '/papi/' + this.areaId + '_json/gnqh.json';
          let jsondata = [];
          this.bhqName.forEach((c, x) => {
            jsondata.push(
              {
                name: c,
                value: 1,
                label: {
                  show: false,
                },
                itemStyle: {
                  show: true,
                  areaColor: this.MapColor[x],
                  borderColor: this.MapColor[x],
                  borderWidth: "1"
                },
              }
            )
          });
          let geo = {
            type: "map",
            map: 'GeoJson',
            regions: jsondata,
            zoom: 1.1,
            show: true,
            roam: true,
          };
          this.map(url, geo)
        }
        if (flag == 'wg') {
          let geo = {
            map: 'GeoJson',
            show: true,
            roam: true,
            zoom: 1.1,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(4, 178, 169, 0.8)',
                borderColor: '#4AEFE6',
                borderWidth: 1,
              },
              emphasis: {},
            },
          };
          let url = '/papi/' + this.areaId + '_json/wangge.json';
          this.map(url, geo)
        }
      },
      map(url, geo) {
        let vm = this
        let myChart = echarts.getInstanceByDom(document.getElementById("map"))
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("map"));
        } else {
          myChart.clear();
        }
        $.getJSON(url, function (geoJson) {
          echarts.registerMap('GeoJson', geoJson);
          myChart.showLoading('default', {
            text: '加载中，请稍候...', maskColor: 'rgba(0,0,0,.3)', textColor: '#fff',
          });
          let option = {
            geo: geo,
            series: []
          }
          myChart.setOption(option, true);
          setTimeout(function () {
            myChart.hideLoading();
            myChart.resize();
          }, 500);
          window.addEventListener("resize", function () {
            myChart.resize();
          })
        });
      },
      drawBar1(data) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar1'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar1'));
        }
        let color = ['#FF3B2E', '#FFDE2E', '#4B2EFF', '#2ECDFF'];
        let option = {
          xAxis: {
            type: 'category',
            data: ['国家Ⅰ级', '国家Ⅱ级', '其他'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 16,
                fontFamily: 'Pingfang'
              }
            },
            splitLine: {
              show: false
            },
            axisLine: {
              //y轴
              show: false
            },
            axisTick: {
              //y轴刻度线
              show: false
            }
          },
          yAxis: {
            type: 'value',
            show: false
          },
          grid: {
            left: '1%',
            right: '1%',
            top: '10%',
            bottom: '15%'
          },
          series: [
            {
              data: data,
              type: 'bar',
              showBackground: true,
              barWidth: 90,
              backgroundStyle: {
                color: 'rgba(46, 255, 242, 0.2)'
              },
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                fontSize: 18,
                fontFamily: 'Pingfang',
                formatter: function (params) {
                  return params.value + '种';
                }
              },
              itemStyle: {
                //定义柱子的样式
                // color:params=>color[params.dataIndex],//定义每根柱子的不同颜色(不渐变)
                //不同柱子颜色渐变
                color: (params) => ({
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: color[params.dataIndex] // 柱子最高度% 处的颜色
                    },
                    {
                      offset: .8,
                      color: 'transparent' // X轴处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }),
                borderRadius: [10, 10, 0, 0] //柱子圆角[上右下左]，也可以统一值。
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
      drawBar2(data) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar2'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar2'));
        }
        let color = ['#FF3B2E', '#FFDE2E', '#4B2EFF', '#2ECDFF'];
        let option = {
          xAxis: {
            type: 'category',
            data: ['国家Ⅰ级', '国家Ⅱ级', '其他'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 16,
                fontFamily: 'Pingfang'
              }
            },
            splitLine: {
              show: false
            },
            axisLine: {
              //y轴
              show: false
            },
            axisTick: {
              //y轴刻度线
              show: false
            }
          },
          yAxis: {
            type: 'value',
            show: false
          },
          grid: {
            left: '1%',
            right: '1%',
            top: '10%',
            bottom: '15%'
          },
          series: [
            {
              data: data,
              type: 'bar',
              showBackground: true,
              barWidth: 90,
              backgroundStyle: {
                color: 'rgba(46, 255, 242, 0.2)'
              },
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                fontSize: 18,
                fontFamily: 'Pingfang',
                formatter: function (params) {
                  return params.value + '种';
                }
              },
              itemStyle: {
                //定义柱子的样式
                // color:params=>color[params.dataIndex],//定义每根柱子的不同颜色(不渐变)
                //不同柱子颜色渐变
                color: (params) => ({
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: color[params.dataIndex] // 柱子最高度% 处的颜色
                    },
                    {
                      offset: .8,
                      color: 'transparent' // X轴处的颜色
                    }
                  ],
                  global: false // 缺省为 false
                }),
                borderRadius: [10, 10, 0, 0] //柱子圆角[上右下左]，也可以统一值。
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
    }
  }
</script>

<style scoped>
  @import "../../static/css/jbxx.css";
</style>
